<template>
  <div>
    <!-- 搜索页面头部 -->
    <div class="search-header">
      <!-- 后退按钮 -->
      <!-- back()后退  forward（）前进  go(-1)后退 go(1)前进  正数前进，负数后退 -->
      <van-icon name="arrow-left" color="white" size="0.48rem" class="goback" @click="$router.back()"/>
      <!-- 搜索组件 -->
      <van-search
      ref="search"
      v-model.trim="keyword"
      placeholder="请输入搜索关键词"
      background="#007BFF"
      shape="round"
      v-focus
      @input="getSearchSuggFn"
      @search='searchFn'
      />
    </div>
    <!-- 搜索建议列表 -->
    <div class="sugg-list" v-if="keyword">
        <div
        class="sugg-item"
        v-for="(str,index) in suggList"
        :key="index"
        v-html="highLightFn(str)"
        @click="searchFn"
        >
        </div>
    </div>
    <!-- 搜索历史 -->
    <div class="search-history" v-else>
        <!-- 标题 -->
        <van-cell title="搜索历史">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon
                name="delete"
                class="search-icon"
                @click="clearHistory"
                />
            </template>
        </van-cell>

        <!-- 历史列表 -->
        <ol class="history-list">
            <li
            class="history-item"
            v-for="(item,index) in history"
            :key="index"
            v-text="item"
            @click="gotoSearchResultFn(item)"
            @touchstart='touchStartFn(index)'
            @touchmove='touchMoveFn'
            @touchend='touchEndFn'
            @contextmenu.prevent
            @selectstart.prevent
            ></li>
            <!-- contextmenu.prevent 鼠标右键弹出菜单 -->
            <!-- selectStart.prevent 长按文字选中 -->
        </ol>
    </div>
  </div>
</template>

<script>
import { getSearchSuggListAPI } from '@/api/search.js'
import { Dialog } from 'vant'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggList: [], // 联想菜单
      history: JSON.parse(localStorage.getItem('history')) || [] // 搜索历史
    }
  },
  watch: {
    //   监听history的改变，一旦变了就保存在localstorage中
    history (newVal) {
      window.localStorage.setItem('history', JSON.stringify(newVal))
    }
  },
  activated () {
    // 搜索框，每次切回来自动聚焦
    this.$refs.search.querySelector('input[type=search]').focus()
  },
  methods: {
    //   触屏开始
    touchStartFn (i) {
      this.timerId = setTimeout(() => {
        //  实现长按事件，需要自己实现，系统没有
        // 删除对应的历史记录
        Dialog.confirm({
          message: '确认删除此条历史记录吗?'
        })
          .then(() => {
            this.history.splice(i, 1)
          })
          .catch(() => {})
      }, 800)
    },
    //   清楚延时器，800毫秒之内移动了或抬起了，所以不用发请求
    touchMoveFn () {
      clearTimeout(this.timerId)
    },
    touchEndFn () {
      clearTimeout(this.timerId)
    },
    //   清空历史记录
    async clearHistory () {
      try {
        await Dialog.confirm({
          message: '确认要删除吗？'
        })
        this.history = []
        window.localStorage.removeItem('history')
      } catch (e) {

      }
    },
    //   获取联想菜单
    getSearchSuggFn () {
      //   防抖
      // 1.关闭上一次的延时器
      if (this.timerId) {
        clearTimeout(this.timerId)
      }
      // 2.重新的开启一次延时器，如果在350毫秒之内，又再次输入了，那么这个延时器就会被关闭
      this.timerId = setTimeout(async () => {
        if (!this.keyword) return
        // 调用联想菜单接口，获取数据
        // 在哪儿调用，就给最近的函数添加asyc
        const res = await getSearchSuggListAPI({
          keyword: this.keyword
        })
        //   数据预处理
        // 后端返回的数据，在复制给vue变量之前，先处理一下
        // 去掉中间的空格
        const { options } = res.data
        // for(let i = 0;i<options.length;i++){
        //     // 用空字符串替代空格
        //  options[i] = options[i].replace(/ /g,'')
        // }
        this.suggList = options.map(str => str.replace(/ /g, ''))
      }, 350)
    },
    //   联想菜单中，包含关键字的需要高亮
    highLightFn (str) {
      // 1.找出联想菜单中，包含关键字的部分-不区分大小写
      const regexp = new RegExp(this.keyword, 'ig')
      // regexp:正则表达式
      // callback：成功的回调函数
      // 如果匹配到了，会用回调函数的返回值，替换掉 匹配的字符串
      return str.replace(regexp, match => {
        // match 里面就是匹配到的字符转
        // 2.给联想菜单中包含关键字的部分添加样式
        return `<span style='color:red'>${match}</span>`
      })
    },
    // 历史记录跳转 --跳转到搜索结果页
    gotoSearchResultFn (str) {
      // 把当前输入的关键字，存到历史记录中
      // 判断，数组去重，不重复再添加
      if (!this.history.includes(str)) {
        this.history.push(str)
      }
      this.keyword = ''
      // 因为跳转页面立刻执行，原页面销毁了，watch监听不到，所以要把跳转页面，放到延时器里
      // 跳转到搜索结果页
      setTimeout(() => {
        this.$router.push(`/search/${str}`)
      })
    },
    // 回车或者点击搜索按钮，自动触发
    searchFn () {
    // 跳转到搜索结果页
      // this.$router.push(`/search/${this.keyword}`)
      this.gotoSearchResultFn(this.keyword)
      // params只能配合name用
      // this.$router.push({
      //     name:'resultList',
      //     params:{
      //         keyword:this.keyword
      //     }
      // })
    }
  }
}
</script>

<style scoped lang="less">
.search-header {
  height: 46px;
  display: flex;
  align-items: center;
  background-color: #007bff;
  overflow: hidden;
  /*后退按钮*/
  .goback {
    padding-left: 14px;
  }
  /*搜索组件*/
  .van-search {
    flex: 1;
  }
}
/*搜索建议列表样式 */
.sugg-list {
  .sugg-item {
    padding: 0 15px;
    border-bottom: 1px solid #f8f8f8;
    font-size: 14px;
    line-height: 50px;
    // 实现省略号的三行代码
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/**搜索历史 */
.search-icon {
  font-size: 16px;
  line-height: inherit;
}

.history-list {
  padding: 0 10px;
  .history-item {
    display: inline-block;
    font-size: 12px;
    padding: 8px 14px;
    background-color: #efefef;
    margin: 10px 8px 0px 8px;
    border-radius: 10px;
  }
}
</style>
